<template>
  <div class="app-container">
    <div class="handle-content">
      <el-input v-if="this.$store.getters.role.store_id == 0" v-model="storeId" placeholder="请输入店铺id" style="width: 200px;margin-right: 10px;" />
      <el-input v-model="dealItemId" placeholder="相关交易id" style="width: 200px;margin-right: 10px;" />
			
			<el-select v-model="status" placeholder="请选择是否生效">
			  <el-option
			    v-for="item in statusList"
			    :key="item.value"
			    :label="item.label"
			    :value="item.value">
			  </el-option>
			</el-select>
      <el-select v-model="value" placeholder="请选择货币类型">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="grade" placeholder="请选择用户等级">
        <el-option
          v-for="item in gradeList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select v-model="deal_type" placeholder="请选择交易类型">
        <el-option
          key=""
          label="全部(请选择交易类型)"
          value="">
        </el-option>
        <el-option
          v-for="(item,key) in dealTypeList"
          :key="key"
          :label="item"
          :value="key">
        </el-option>
      </el-select>
			<el-select v-model="recharge_type" placeholder="请选择充值,转账">
			  <el-option
			    key=""
			    label="全部(请选择充值或转账)"
			    value="">
			  </el-option>
			  <el-option
			    v-for="(item,key) in rechargeList"
			    :key="key"
			    :label="item"
			    :value="key">
			  </el-option>
			</el-select>
      <el-date-picker
        v-model="time"
        style="width: 50%;"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-input v-model="userId" placeholder="请输入用户ID" style="width: 250px;margin-right: 10px;">
        <el-button slot="append" @click="search">查询</el-button>
      </el-input>
      <span class="right">
        <el-button type="primary" @click="exportExcel">
          导出
        </el-button>
      </span>
    </div>

    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
      <el-table-column v-if="this.$store.getters.role.store_id == 0" label="店铺ID" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.store_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.user_id }}
        </template>
      </el-table-column>
      <el-table-column label="会员昵称" align="center">
        <template slot-scope="scope">
          {{ scope.row.nickname }}
        </template>
      </el-table-column>
      <el-table-column label="会员等级" align="center">
        <template slot-scope="scope">
          {{ scope.row.grade }}
        </template>
      </el-table-column>
      <el-table-column label="资金进出类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.type == 'in' ? '增加' : '减少' }}
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center">
        <template slot-scope="scope">
          {{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column label="交易前余额" align="center">
        <template slot-scope="scope">
          {{ scope.row.last_balance }}
        </template>
      </el-table-column>
      <el-table-column label="交易后余额" align="center">
        <template slot-scope="scope">
          {{ scope.row.new_balance }}
        </template>
      </el-table-column>
      <el-table-column label="交易说明" align="center">
        <template slot-scope="scope">
          {{ scope.row.reason }}
        </template>
      </el-table-column>
      <el-table-column label="交易状态" align="center">
        <template slot-scope="scope">
          {{ scope.row.status == 1 || scope.row.status == 3 ? '已生效' : '未生效'}}
        </template>
      </el-table-column>
      <el-table-column label="相关操作ID" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.order_type=='会员订单'" style="color: rgb(64, 158, 255);cursor:pointer;" @click="orderInfo(scope.row.deal_item_id)">{{ scope.row.deal_item_id }}</span>
          <span v-else>{{ scope.row.deal_item_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="支付标识" align="center">
        <template slot-scope="scope">
          {{ scope.row.pay_orderid }}
        </template>
      </el-table-column>
      <el-table-column label="报单中心ID" align="center">
        <template slot-scope="scope">
          {{ scope.row.deal_get_id }}
        </template>
      </el-table-column>
      <el-table-column label="成为报单中心时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.partner_at }}
        </template>
      </el-table-column>
      <el-table-column label="相关类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.order_type }}
        </template>
      </el-table-column>
      <el-table-column label="金额类型" align="center">
        <template slot-scope="scope">
          {{ scope.row.jm_type }}
        </template>
      </el-table-column>
      <el-table-column label="交易备注" align="center">
        <template slot-scope="scope">
          {{ scope.row.mark }}
        </template>
      </el-table-column>
      <el-table-column label="添加时间" align="center">
        <template slot-scope="scope">
          {{ scope.row.created_at }}
        </template>
      </el-table-column>
    </el-table>
    <pagination v-if="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
    <el-dialog title="订单详情" :visible.sync="showOrderInfo">
      <el-table :data="gridData">
        <el-table-column label="商品封面" align="center">
          <div slot-scope="scope">
            <img :src="scope.row.cover" style="display: inline-block; width: 80px;height:80px;border-radius: 4px;">
          </div>
        </el-table-column>
        <el-table-column property="good_title" label="商品名称" align="center" />
        <el-table-column property="pay_price" label="购买单价" align="center" />
        <el-table-column property="goods_quantity" label="购买数量" align="center" />
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { getList } from '@/api/deal'
import { getToken } from '@/utils/auth' // get token from cookie
import { parseTime } from '@/utils/index'
import { getList as getOrderList } from '@/api/order'
export default {

  components: { Pagination },

  data() {
    return {
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        storeId: '',
        userId: '',
        dealItemId: '',
        pageSize: 20,
        goldType: '',
        grade: '',
        deal_type: '',
				status: '',
				recharge_type: '',
        begin_at:'',
        end_at:''
      },
      total: 0,
      storeId: '',
      dealItemId: '',
      userId: '',
      value: '',
      path: '',
      options: [{
          value: '0',
          label: '全部'
        },{
          value: '1',
          label: '余额'
        }, {
          value: '2',
          label: '积分'
        }, {
          value: '3',
          label: '订单指数'
        }],
        time: '',
        showOrderInfo: false,
        gridData: [],
        gradeList:[{
          value: '',
          label: '全部(请选择等级)'
        },{
          value: '0',
          label: '会员'
        }, {
          value: '1',
          label: 'VIP会员'
        }, {
          value: '2',
          label: '报单中心'
        }],
        grade:'',
        dealTypeList:[],
        deal_type:'',
				statusList:[{
          value: '',
          label: '全部(是否生效)'
        },{
          value: '0',
          label: '未生效'
        },{
          value: '1',
          label: '已生效'
        }],
				status:'',
				rechargeList:[],
				recharge_type:'',
    }
  },

  mounted() {
    this.getList()
  },

  methods: {
    getList() {
      this.listLoading = true
      console.log(this.listQuery)
      getList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
        this.path = response.data.path
        this.dealTypeList = response.data.deal_type_list
        this.rechargeList = response.data.recharge_type
        this.options[3].label = response.data.awardName
      })
    },

    search() {
      this.listQuery.storeId = this.storeId
      this.listQuery.userId = this.userId
      this.listQuery.dealItemId = this.dealItemId
      this.listQuery.page = 1
      this.listQuery.goldType = this.value
      this.listQuery.grade = this.grade
      this.listQuery.deal_type = this.deal_type
      this.listQuery.status = this.status
      this.listQuery.recharge_type = this.recharge_type
      this.listQuery.begin_at = parseTime(this.time[0])
      this.listQuery.end_at = parseTime(this.time[1])
      this.getList()
    },

    exportExcel() {
      const url = this.path + '?storeId=' + this.listQuery.storeId + '&userId=' + this.listQuery.userId + '&goldType=' + this.listQuery.goldType + '&dealItemId=' + this.listQuery.dealItemId + '&begin_at=' + this.listQuery.begin_at + '&end_at=' + this.listQuery.end_at + '&grade=' + this.listQuery.grade + '&deal_type=' + this.listQuery.deal_type + '&status=' + this.listQuery.status + '&recharge_type=' + this.listQuery.recharge_type + '&pageSize=' + this.listQuery.pageSize + '&page=' + this.listQuery.page + '&token=' + getToken() + '&report=' + true

      location.href = url
    },
    orderInfo(id) {
      let querData = {
        page: 1,
        storeId: 0,
        userId: '',
        acceptUser: '',
        orderId: id,
        orderCode: '',
        orderStatus: '100',
        pageSize: 10
      }
      getOrderList(querData).then(response => {
        if(response.data.data.length > 0 ){
            this.showOrderInfo = true
            this.gridData = response.data.data[0].order_items
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.app-container{
    .handle-content{
        margin-bottom: 20px;
        .right{
            float: right;
        }
    }
}
</style>
